﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Animations</title>
    <script src="../js/jquery-1.4.min.js" type="text/javascript"></script>
    <style>

body {
     background:url(../imgs/biaochi.png) no-repeat 0 -15px;
     padding:10px;
}

.box {
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari and Chrome */
    border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
    box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

    behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
#div1 { 
    background-color: red;
    background-image: url(11.jpg);
    width:450px;
    height:400px;
}
@keyframes mycolor {
}
@-moz-keyframes mycolor{
}
@-webkit-keyframes mycolor {
    0% {
        background-color: red;
    }
    40% {
        background-color: darkblue;
    }
    70% {
        background-color: yellow;
    }
    100% {
        background-color: red;
    }
}
#div1:hover {
    -webkit-animation-name: mycolor;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
}
#div3 { 
    top: 100px;
    position: absolute;
    border:solid 1px red;
    width: 500px;
    background-color: yellow;
}
@-webkit-keyframes wobble {
    0% {
        background-color: red;
        -webkit-transform: rotate(0deg);
    }
    40% {
        background-color: darkblue;
        -webkit-transform: rotate(30deg);
    }
    70% {
        background-color: yellow;
        -webkit-transform: rotate(-30deg);
    }
    100% {
        background-color: red;
        -webkit-transform: rotate(0deg);
    }
}

#div3:hover {
    -webkit-animation-name: wobble;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

#div2{
	width:500px; height:100px; border:solid 1px red;
	background-color: blue;
	-webkit-transition: background 1s linear;
	-moz-transition: background 1s linear;
	-o-transition: background 1s linear;
	transition: background 10s linear;
}
#div2:hover{
	background-color: #0ff;
}

#div4{
    background-color: #ff0;
    color: #000;
    width: 400px;
    height:100px;
    -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
    -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
    -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
#div4:hover{
	background-color: #0ff;
            color: #fff;
            width: 500px;
}
#div5{
    width:300px; height:100px; text-align:center; line-height:100px;
    color:Black; background-color:White;
    font-size:12px;
    -webkit-transition: font-size 1s linear,background-color 1s linear;
}
#div5:hover {
    font-size:36px;
    background-color:red;
}

#div6 {
      display: inline;
}


#content2 {
    width:300px;background-color:Gray; text-align:center;top:50%;height:240px;margin-top:-120px; /* negative half of the height */
}

p{ display:table;}

         </style>
    <script type="text/javascript">

        $(window).scroll(function (a, b) {

            console.log('xxxx');

        });
         
    </script>
    <script type="text/javascript">
        function insertcode() {
            var $body = $("body");
            $body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
            $("#page_tag_load").hide();
        }
        $(document).ready(function () {

            $(window).scroll(function () {
                var $body = $("body");
                var $html = "";
                $html += "<br/>" + ($(window).height() + $(window).scrollTop());
                $html += "<br/>window.height: " + $(window).height();
                $html += "<br/>body.height: " + $body.height();
                $html += "<br/>window.scrollTop: " + $(window).scrollTop();
                $("#page_tag_bottom").html($html);

                /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
                if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
                    $("#page_tag_load").show();
                    //setTimeout(insertcode, 1000);/*IE 不支持*/
                    insertcode();
                }
            });
        });
    </script>
</head>
<body>
    <div id="scroll" style="width: 500px; height: 200px; border: 1px solid red;">
        <span></span>
    </div>
    <div id="div1" class="box">
        div1</div>
    <div id="div2">
        div2</div>
    <div id="div3">
        div3</div>
    <div id="div4" class="box">
        div4</div>
    <div id="div5">
        hello world
    </div>
    <div id="div6">
    </div>
    <div id="content2">
        Content here2
    </div>
    <p>
        本例中的样式表把段落元素设置为内联元素。</p>
    <p>
        而 div 元素不会显示出来！</p>
    <div style="height: 1000px; font-size: 24px;">
        新增项目</div>
    <div id="page_tag_bottom" style="width: 100%; position: fixed; top: 0px; background-color: #cccccc;
        height: 100px;">
    </div>
    <div id="page_tag_load" style="display: none; font-size: 14px; position: fixed; bottom: 0px;
        background-color: #cccccc; height: 50px;">
        加载中...</div>
</body>
</html>
